<template>  
    <div class="submit-flow">
      <el-drawer  v-model="isShowDialog" size="50%"  >
       <template #header>
        <div style="font-size: 18px;font-weight: bold;">{{props.title}}</div>
       </template>
         <!-- {{ formconfigRef.conf }} -->
           <div style="padding: 20px;">
            <el-form ref="formref" :label-width="formconfigRef.conf.labelWidth" :size="formconfigRef.conf.size"
            :label-position="formconfigRef.conf.labelPosition" class="w-form-render" :model="ruleForm">
                <template v-for="(cp, i) in formconfigRef.components" :key="cp.type + i">
                    <el-form-item :label="cp.name" v-if="!cp.props.isContainer" :required="cp.props.required"
                                    :class="{'w-form-cp-nlb':cp.props.hideLabel}" :prop="cp.name">
                        <component :is="FormComponents[cp.type]"  :config="cp" v-model.trim="ruleForm[cp.name]"/>
                    </el-form-item>
                    <component v-else :is="FormComponents[cp.type]"  v-model="ruleForm[0]" :config="cp"/>
                </template>
            </el-form>
           </div>
      
        
        <template #footer>
				<div class="dialog-footer" style=" background-color: #eee; height: 60px; line-height: 60px;  padding: 0 30px;" >
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary"  @click="submit(formref)">确 定</el-button>
                </div>
			</template>
     </el-drawer>

    </div>
</template>
<script lang="ts" setup>
import { ref,computed } from 'vue'
import {FormComponents} from "/@/views/approvalFlow/component/form/FormComponents.js";
// import componentMixin from "/@/views/approvalFlow/component/form/FormComponentMixin.js";
import type { FormInstance } from 'element-plus'
const formref = ref<FormInstance>();
const isShowDialog = ref(false)
const ruleForm = ref<any>([]);
const formconfigRef = ref<any>({});
//父级传递来的参数
var props = defineProps({
		title: {
		type: String,
		default: "",
	},
	});

// 打开弹窗
const openDialog = async (row: any) => {
		formconfigRef.value = {};
		let rowData = JSON.parse(row);      
        formconfigRef.value = rowData;  
		isShowDialog.value = true;
	};

	// 关闭弹窗
	const closeDialog = () => {		
		isShowDialog.value = false;
	};

	// 取消
	const cancel = () => {
		isShowDialog.value = false;
	};

	// 提交
	const submit = (forme: FormInstance | undefined) => {
        console.log(forme);
		if (!forme) return
        forme.validate((valid) => {
            if (valid) {
                let values = ruleForm.value;
                console.log(values);
                // ruleForm.value = {};
                // forme.resetFields();
                closeDialog();
            } else {
                    console.log('error submit!')
            }
        })
      
	};
	//将属性或者函数暴露给父组件
	defineExpose({ openDialog });
</script>